import {
  getCurrentInstance,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  ref,
  shallowRef
} from 'vue'
import _ from 'lodash'

export const useEchartsOperations = () => {
  const app = getCurrentInstance()
  const echarts = app.appContext.config.globalProperties.$echarts
  const chart = ref()
  const chartInstance = shallowRef()
  const totalPage = ref(0)
  const page = ref(1)
  const pageSize = ref(5)
  const data = ref([])

  const initChart = () => {
    chartInstance.value = echarts.init(chart.value, 'chalk')
    // 鼠标移入事件，暂停定时器
    chartInstance.value.on('mouseover', () => {
      clearTimer()
    })
    // 鼠标移出事件，启动定时器
    chartInstance.value.on('mouseout', () => {
      startTimer()
    })
  }
  // 合并请求数据完成配置,不同的图表类型需要不同的请求，这里不做具体的实现而是提供一个接口
  const fetchData = ref(async () => {})
  // 更新图表，不同的图表类型需要不同的配置，这里不错具体的实现而是提供一个接口
  const updateChart = ref(() => {})
  // 定时器
  let timerId = null
  // 启动定时器, 要不要开启定时器，可以根据实际需求来决定
  const startTimer = () => {
    if (timerId) clearTimer()
    timerId = setInterval(() => {
      page.value = page.value >= totalPage.value ? 1 : page.value + 1
      // 定时器更新图表
      updateChart.value()
    }, 3000)
  }
  // 销毁定时器
  const clearTimer = () => {
    clearInterval(timerId)
  }

  // 屏幕适配
  const titleFontSize = ref(0)
  const screenAdapter = () => {
    titleFontSize.value = (chart.value.offsetWidth / 100) * 3.6
    updateChart.value()
    chartInstance.value.resize()
  }
  // 防抖函数
  const debounceAdapter = _.debounce(screenAdapter, 300)
  //  初始化图表
  onMounted(async () => {
    // 注册窗口事件
    window.addEventListener('resize', debounceAdapter)
    initChart()
    await fetchData.value()

    screenAdapter()
  })
  // 销毁定时器
  onBeforeUnmount(() => {
    clearTimer()
  })
  // 销毁图表
  onUnmounted(() => {
    // 取消窗口事件
    window.removeEventListener('resize', debounceAdapter)
    chartInstance.value.dispose()
  })
  return {
    chart,
    chartInstance,
    fetchData,
    initChart,
    updateChart,
    totalPage,
    page,
    pageSize,
    data,
    screenAdapter,
    titleFontSize,
    startTimer
  }
}
